<template>
  <base-layout>
    <section :class="{ 'hidden-x': isMenuVisible }">
      <router-view />
    </section>
  </base-layout>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';
import { useStore } from '@/store';
export default defineComponent({
  name: 'Index',
  setup() {
    // vuex
    const store = useStore();

    const isMenuVisible = computed(() => store.state.isMenuVisible);

    return { isMenuVisible };
  },
});
</script>

<style scoped lang="scss">
.hidden-x {
  overflow-x: hidden;
}
</style>
